import React, { useState} from 'react'
import { Link ,useLocation} from 'react-router-dom'
import Carousel from '../components/Carousel'

export default function Header() {
  // 登录后的用户信息
  let [userInfo,serUserInfo]=useState({uname:'tom'})
  // 显示购物车下拉菜单
  let [showCarDropdown,setShowCarDropdown]=useState(false)
  //  当前路由地址
  let {pathname}=useLocation()
  // console.log(x);
  function loginArea(){
    if(userInfo.uname){
      return(
        <React.Fragment>
          <li className="top_user">
            <Link to="/profile">{userInfo.uname}</Link>
          </li>
          <li className="top_quit"><a href="#">退出</a></li>
        </React.Fragment>
      )
    }else{
      return(
        <React.Fragment>
          <li><Link to="/login" className="h_login">登录</Link></li>
          <li><em>|</em></li>
          <li><Link to="/register" className="h_register">注册</Link></li>
        </React.Fragment>
      )

    }
  }
  return (
    <div className='header_box'>
      <header className="header container">
        <h1 className="logo">
          <Link to="/" className="link"></Link>
        </h1>
        <div className="h_con">
          <ul className="clearfloat">
            <li className="phone">4000-585-116</li>
            <li><a href="#">中文</a></li>
            <li><em>|</em></li>
            <li><a href="#">English</a></li>
            <li><a href="#" className="weixin"></a></li>
            <li><a href="#" className="weibo"></a></li>
            {loginArea()}
          </ul>
          <div className="search clearfloat">
            <button type="button"></button>
            <input type="text" />
          </div>
        </div>
      </header>
      {/*nav*/}
      <nav className="navbar">
        <div className="container">
          <div className="nav">
            <ul>
              <li className={pathname==='/'?'cur':undefined}>
                <Link to="/">
                <span className="icon_home"></span>首页</Link>
              </li>
              <li className={pathname==='/about'?'cur':undefined}>
                <Link to="/about">关于净美仕</Link>
              </li>
              <li className={pathname==='/news'?"cur":undefined}>
                <Link to="/news">公司动态</Link>
              </li>
              <li className={pathname==='/product'?'nav_pd cur':'nav_pd'}>
                <Link to="/product">产品中心<span className="icon_pd"></span></Link>
                <div className="pd_dropdown">
                  <Link to="/product.html?type=1">净美仕净化器</Link>
                  <Link to="/product.html?type=2">净美仕滤网</Link>
                </div>
              </li>
              <li className={pathname==='/contact'?'cur':undefined}>
                <Link to="/contact">联系我们</Link>
              </li>
            </ul>
          </div>
          <div className="s_cart" 
          onMouseEnter={()=>{setShowCarDropdown(true)}}
          onMouseLeave={()=>{setShowCarDropdown(false)}}>
            <Link to="/cart">
              <span className="icon_cart"></span>
              购物车(<strong id="cart_sum">0</strong>)
              <span className="icon_sj"></span>
            </Link>
            <div className="cart_dropdown" style={{display:showCarDropdown?'block':"none"}}>
              <h3>您的购物车为空~</h3>
              <ul>
                {/*<li>*/}
                  {/*<a href=""><img src="product-imgs/jhq-m8088a.jpg" alt="" /></a>*/}
                  {/*<div>*/}
                    {/*<span>-</span><input type="text" value="2" /><span>+</span>*/}
                    {/*</div>*/}
                  {/*<strong>¥1599.00</strong>*/}
                  {/*<em></em>*/}
                  {/*</li>*/}
                {/*<li>*/}
                  {/*<a href=""><img src="product-imgs/jhq-m8088a.jpg" alt="" /></a>*/}
                  {/*<div>*/}
                    {/*<span>-</span><input type="text" value="2" /><span>+</span>*/}
                    {/*</div>*/}
                  {/*<strong>¥1599.00</strong>*/}
                  {/*<em></em>*/}
                  {/*</li>*/}
              </ul>
              <div className="cd_js clearfloat">
                <span>共计：<strong>0.00</strong></span>
                <a href="#">结算</a>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </div>
  )
}
